<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
	$('#nav li').hover(function() {
		$('ul', this).slideDown(200);
		$(this).children('a:first').addClass("hov");
	}, function() {
		$('ul', this).slideUp(100);
		$(this).children('a:first').removeClass("hov");		
	});
});
</script>
<style type="text/css">
{
  font-family: NanumGothic;
}

#nav 
{ 
	margin: 0; 
	padding: 0; 
	list-style: none; 
	height: 50px;
	background: #000000; 
}

#nav li 
{
	position:absolute;
	left: 13%;
	float: left;
	display: block;
	background: none;
	position: relative;
	z-index: 999;
	margin: 0 1px; }

#nav li a 
{
	display: block;
	padding: 0;
	font-weight: 700;
	line-height: 50px;
	text-decoration: none;
	color: white;
	zoom: 1;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	padding: 0px 12px; 
}
#nav li a:hover, #nav li a.hov {
	background-color: #fff;
	border-left: 1px solid #d5dce8;
	border-right: 1px solid #d5dce8;
	color: #576482; 
}

#nav ul {
	position: absolute; 
	left: 1px; 
	display: none; 
	margin: 0; 
	padding: 0; 
	background-color: white;
	list-style: none; 
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
	-o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
	box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
	padding-bottom: 3px; 
}	
#nav ul li { width: 180px; float: left; border-top: 1px solid transparent; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }

#nav ul a 
{ 
	display: block;
	height: 20px; 
	line-height: 20px; 
	padding: 8px 5px; 
	color: #666; 
	border-bottom: 1px solid transparent; 
	text-transform:  uppercase; 
	color: #797979; 
	font-weight: normal; 
}

#nav ul a:hover 
{
	text-decoration: none; 
	border-right-color: transparent; 
	border-left-color: transparent; 
	background: transparent; 
	color: #4e4e4e; 
}

* html #nav ul { margin: 0 0 0 -2px; }

.clearfix:after 
{ 
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0; 
}
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

</style>
</head>
<body>
<div class="wrap">
	<ul id="nav">
		<li><a href="allView_board.do?boardNo=18">NOTICE</a></li>
		<li><a href="#">NEWS</a>
			<ul>
				<li><a href="allView_board.do?boardNo=16">뉴스 및 소식</a></li>
				<li><a href="allView_board.do?boardNo=17">스페셜 메뉴</a></li>
			</ul>			
		</li>
		<li><a href="#">THE 2AM</a>
			<ul>
				<li><a href="allView_board.do?boardNo=20">음원 게시판</a></li>
				<li><a href="allView_board.do?boardNo=13">동영상 게시판</a></li>
				<li><a href="allView_board.do?boardNo=14">요청 게시판</a></li>
			</ul>
		</li>
		<li><a href="#">COMMUNITY</a>
			<ul>
				<li><a href="allView_board.do?boardNo=11">자유 게시판</a></li>
				<li><a href="allView_board.do?boardNo=15">리뷰 게시판</a></li>
				<li><a href="allView_board.do?boardNo=12">Q&A 게시판</a></li>
			</ul>
		</li>
		<li><a href="guestbook_board.do">GUEST BOOK</a></li>
		<li><a href="allView_board.do?boardNo=21">GALLERY</a></li>
	</ul>
</div>
</body>
</html>